import React from 'react'
import { Avatar} from 'antd-mobile'
import '../css/Mine.css'
import { Agenda } from '@nutui/icons-react'
import { Order } from '@nutui/icons-react'
import { Refund } from '@nutui/icons-react'
import { Board } from '@nutui/icons-react'
import { ToReceive } from '@nutui/icons-react'
import { StarFill } from '@nutui/icons-react'
import { Gift } from '@nutui/icons-react'
import { Orderlist } from '@nutui/icons-react'
import { FollowAdd } from '@nutui/icons-react'
import { Video } from '@nutui/icons-react'
import { Voucher } from '@nutui/icons-react'
import { Alarm } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
export default function Mine() {
  let nav=useNavigate()
  return (
    <div className='big'>
      <div className='box1'>
        <Avatar src='' style={{borderRadius: '50%'}} />
        <div className='box1ul'>
        <p>客服</p>
        <p onClick={()=>{nav("/set")}}>设置</p>
      </div>
     </div>

      <div className='box2'>
      <div className='box2top'>
        <p className='box2tp1'>我的专属权益</p>
        <p>免费领券 最高可得60元通用红包</p>
      </div>
        <div className='box2bottom'>
          <div className='box2bottomleft'>
            <div className='box2bottomleft1'>
              <p className='box2bottomleft2'>优惠券</p>
              <p className='box2bottomleft3'>5张</p>
            </div>
          </div>
          <div className='box2bottomright'>
            <div className='box2bottomright1'>
              ￥60
            </div>
            <div className='box2bottomright2'>
              <p className='box2bottomright3'>满200可用</p>
              <p className='box2bottomright4'>指定商品可用</p>
              <p className='box2bottomright5'><button>去使用</button></p>
            </div>
          </div>
        </div>
      </div>
      <div className='box3'>
        <h3>我的订单</h3>
        <div className='box3top'>
          <p><Agenda /></p>
          <p><Order /></p>
          <p><Refund /></p>       
          <p><Board /></p>
        </div>
        <div className='box3bottom'>
          <p className='box3bottom1'>全部订单</p>
          <p className='box3bottom2'>待付款</p>
          <p className='box3bottom3'>待点评</p>       
          <p className='box3bottom4'>退款单</p>
        </div>
      </div>
      <div className='box4'>
        <h3>我的服务</h3>
        <div className='box41top'>
          <p><ToReceive /></p>
          <p><StarFill /></p>
          <p><Gift /></p>       
          <p><Orderlist /></p>
        </div>
        <div className='box41bottom'>
          <p className='box41bottom1'>我的游记</p>
          <p className='box41bottom2'>我的攻略</p>
          <p className='box41bottom3'>我的活动</p>       
          <p className='box41bottom4'>我的预约</p>
        </div>
        <div className='box42top'>
          <p><FollowAdd /></p>
          <p><Video /></p>
          <p><Voucher /></p>       
          <p><Alarm /></p>
        </div>
        <div className='box42bottom'>
          <p className='box42bottom1'>我的收藏</p>
          <p className='box42bottom2'>我的视频</p>
          <p className='box42bottom3'>常用信息</p>       
          <p className='box42bottom4'>浏览历史</p>
        </div>
      </div>
    </div> 
  )
}
